<template>
  <a-table
    :scroll="table_scroll_config"
    :pagination="pagination.data"
    :columns="columns"
    :loading="loading.search_loading"
    :dataSource="table_data"
    ref="tb"
    rowKey="id"
    v-bind="{ ...attr, ...uiAttr, ...scroll_config }"
  >
    <template
      v-slot:[item.dataIndex]="{ text, record, index }"
      v-for="item in columns"
      :key="item.dataIndex"
    >
      <Children :data="item.bodyFn.bind(null, text, record, index)" />
    </template>

    <template
      v-slot:[item.solt_title]
      v-for="item in columns"
      :key="item.solt_title"
    >
      <Children :data="item.titleFn.bind(null, item)" />
    </template>
    <template #title><slot></slot></template>
  </a-table>
  <slot name="footer"></slot>
</template>
<script>
// :row-selection="{ selectedRowKeys:selectedRowKeys.data, onChange: onSelectChange} "

import {
  defineComponent,
  reactive,
  computed,
  ref,
  watchEffect,
  onMounted,
  onUnmounted,
} from 'vue'
import { table_scroll_config } from '@Config/config'
import { findIndex } from 'lodash'
import * as Antd from 'ant-design-vue'
const Children = defineComponent({
  props: ['data'],
  setup(props) {
    return {
      props,
    }
  },
  render() {
    return this.props.data()
  },
})

export default defineComponent({
  props: {
    pagination: {
      type: Object,
      default: () => {
        return {
          data: false,
        }
      },
    },
    data: {
      type: Object,
      default: () => {
        return {
          data: {
            columns: [],
            source: [],
          },
        }
      },
    },
    selectedRowKeys: {
      type: Object,
      default: () => {
        return { data: [] }
      },
    },
    loading: {
      type: Object,
      default: () => {
        return {
          search_loading: false,
        }
      },
    },
    custom: {
      type: Array,
      default: () => {
        return []
      },
    },
    disabledSelectedKeys: {
      type: Boolean,
      default: true,
    },
    uiAttr: {
      type: Object,
      default: () => {
        return {}
      },
    },
    disabledResponse: {
      type: Array(Boolean, Number),
      default: false,
    },
    tbSType: {
      type: String,
      default: () => {
        return 'checkbox'
      },
    },
  },
  components: {
    Children,
    'a-table': Antd.Table,
    // eslint-disable-next-line vue/no-unused-components
    'a-button': Antd.Button,
  },
  mounted() {
    // window.onload = () => {
    //   if (window.innerWidth < 1280) {
    //     this.uiAttr.scroll.x = 1280
    //   } else {
    //     this.uiAttr.scroll.x = null
    //   }
    // }
  },
  setup(props, context) {
    let { slots } = context

    let tb = ref(null)

    const onSelectChange = (selectedRowKeys) => {
      //  console.log(selectedRowKeys, table_data.value)

      // let _c = selectedRowKeys.map((x) => {
      //   let index = findIndex(table_data.value, { id: x })

      //   if (index >= 0) {
      //     return table_data.value[index]
      //   }
      // })

      // console.log(_c)

      // eslint-disable-next-line vue/no-mutating-props
      props.selectedRowKeys.data = selectedRowKeys
    }
    let templates = reactive({ data: [] })

    let attr = reactive({ rowSelection: null })

    watchEffect(() => {
      if (tb.value && attr?.rowSelection?.selectedRowKeys) {
        tb.value.rowSelection.selectedRowKeys = props.selectedRowKeys.data
        tb.value.rowSelection.getCheckboxProps =
          props.selectedRowKeys.getCheckboxProps
      }
    })

    if (!props.disabledSelectedKeys) {
      attr.rowSelection = {
        selectedRowKeys: props.selectedRowKeys.data,
        onChange: onSelectChange,
        getCheckboxProps: null,
        type: props.tbSType || 'checkbox',
      }
      if (props.selectedRowKeys.getCheckboxProps) {
        // eslint-disable-next-line vue/no-setup-props-destructure
        attr.rowSelection.getCheckboxProps =
          props.selectedRowKeys.getCheckboxProps
      }
    }

    let table_data = computed(() => {
      return props.data.data.source
    })

    const columns = computed(() => {
      return props.data.data.columns
        .map((x) => {
          var c = Object.assign(
            {},
            x,
            //自成template内容及名称
            {
              cn: x.title,
              solt_title: x.dataIndex + '_title',
              slots: {
                customRender: x.dataIndex,
                title: x.dataIndex + '_title',
              },
              titleFn: (_item) => {
                return <span>{_item.cn}</span>
              },
              bodyFn: (text, record, index) => {
                if (x.slash) {
                  return <span v-slash={text}>{text}</span>
                } else if (x.transform) {
                  return <span>{x.transform(text, record, index)}</span>
                } else {
                  return <span>{text}</span>
                }
              },
            }
          )

          let _index = findIndex(props.custom, { key: x.dataIndex })

          //合并外面我自定义选项
          if (_index >= 0) {
            c = Object.assign({}, c, props.custom[_index])
          }
          delete c.title
          return c
        })
        .concat(props.data.data.extralColumns || [])
    })

    let scroll_config = reactive({ scroll: { x: null } })

    let scroll_fn = () => {
      if (typeof props.disabledResponse == 'boolean') {
        if (!props.disabledResponse) {
          if (window.innerWidth < 1280) {
            scroll_config.scroll.x = 1280
          } else {
            scroll_config.scroll.x = null
          }
        }
      } else if (typeof props.disabledResponse == 'number') {
        scroll_config.scroll.x = props.disabledResponse
      }
    }
    onMounted(() => {
      scroll_fn()
      window.onresize = scroll_fn
      window.onload = scroll_fn
    })

    onUnmounted(() => {
      window.onresize = null
      window.onload = null
    })

    return {
      slots,
      templates,
      columns,
      ...props,
      table_scroll_config,
      onSelectChange,
      attr,
      tb,
      table_data,
      scroll_config,
    }
  },
})
</script>
